export default defineNuxtPlugin(() => {
  // 创建滚动到顶部组件的逻辑
  const createScrollToTop = () => {
    // 创建按钮元素
    const scrollButton = document.createElement('div')
    scrollButton.innerHTML = `
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 14L12 9L17 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    `
    
    // 设置按钮样式
    scrollButton.style.cssText = `
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      z-index: 9998;
      color: #333;
      display: none;
    `
    
    // 添加鼠标悬停效果
    scrollButton.addEventListener('mouseenter', () => {
      scrollButton.style.transform = 'translateY(0) scale(1.1)'
      scrollButton.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.2)'
    })
    
    scrollButton.addEventListener('mouseleave', () => {
      scrollButton.style.transform = 'translateY(0) scale(1)'
      scrollButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'
    })
    
    // 点击事件 - 滚动到顶部
    scrollButton.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    })
    
    // 滚动监听 - 控制按钮显示/隐藏
    let isVisible = false
    const toggleButton = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      const shouldShow = scrollTop > 300
      
      if (shouldShow && !isVisible) {
        scrollButton.style.opacity = '1'
        scrollButton.style.visibility = 'visible'
        scrollButton.style.transform = 'translateY(0)'
        isVisible = true
      } else if (!shouldShow && isVisible) {
        scrollButton.style.opacity = '0'
        scrollButton.style.visibility = 'hidden'
        scrollButton.style.transform = 'translateY(20px)'
        isVisible = false
      }
    }
    
    // 节流函数
    let ticking = false
    const handleScroll = () => {
      if (!ticking) {
        requestAnimationFrame(() => {
          toggleButton()
          ticking = false
        })
        ticking = true
      }
    }
    
    // 添加滚动监听
    window.addEventListener('scroll', handleScroll, { passive: true })
    
    // 将按钮添加到页面
    document.body.appendChild(scrollButton)
    
    // 返回清理函数
    return () => {
      window.removeEventListener('scroll', handleScroll)
      if (scrollButton.parentNode) {
        scrollButton.parentNode.removeChild(scrollButton)
      }
    }
  }
  
  // 在页面加载完成后创建按钮
  if (process.client) {
    let cleanup = null
    
    const initScrollToTop = () => {
      if (cleanup) cleanup()
      cleanup = createScrollToTop()
    }
    
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initScrollToTop)
    } else {
      initScrollToTop()
    }
    
    // 路由变化时重新初始化（如果需要）
    if (window.$nuxt) {
      window.$nuxt.$router.afterEach(() => {
        setTimeout(initScrollToTop, 100)
      })
    }
  }
}) 